<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript">
    </script>
</head>

<body>
    <style>
        #app {
            padding-bottom: 400px;
        }

        .out {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        .in {
            width: 80px;
            height: 80px;
            border: 1px solid red;
        }

        #abc {
            color: darkred;
        }

        .a {
            border: 1px solid #091;
        }

        .b {
            color: blue;
        }

        .c {
            font-size: 10px;
        }
    </style>

    <div id="app">
        {{ 1+1 }}
        <div> a: {{ a }} </div>
        <div> ct: {{ ct }} </div>
        <button @click="ct++"> ct++ </button>

        <hr>
        <!-- 对则选右，错则选左 -->
        {{  4&&6 }}
        {{  0&&8 }}
        <div>{{  3&&9 }}</div>
        <div>{{  false ? '对的' : '错的' }}</div>
        {{ true ? '123':'456' }}
        <!-- 在vue当中 只要是以 v- 开头的属性 都是指令 -->
        <!-- 指令等于的值 是js的值 -->

        <!-- v-if 根据一个布尔值来决定是否渲染 -->
        <div v-if="a1"> 是否渲染 </div>
        <div v-else-if="a2">我是第二个条件</div>
        <div v-else>上面不渲染就渲染我 </div>
        <div v-if="undefine"> 布尔值不正确，我不渲染 </div>
        <div v-else-if="1"> 布尔值正确，我渲染 </div>
        <div v-else> 上面都不渲染，这里是最终渲染结果</div>

        <!-- v-show 根据一个布尔值来决定样式是否为可见 -->
        <!-- v-if 和 v-show的区别 
            1 v-if决定是节点上是否存在
            2 v-show仅仅是视图上的 显示与否(控制的display这个样式)
            3 还需要从 重绘 重排的角度去分析性能的差异 v-show 性能消耗  小于  v-if 
            4 如果频繁的去循环显示隐藏 使用  v-show
        -->
        <div v-show="a3"> 是否显示</div>
        <p v-show="a4"> {{ a4 }} </p>
        <input type="text" v-model="a4" />
        <!-- 遍历的是一个整数 item 从1 到 整数的一个递增 -->
        <div v-for="(item,index) of 6"> {{  index+1 }}-{{ item }}</div>
        <!-- 遍历的是一个字符串 item依次等于每个字符 -->
        <div v-for="item of '你好中国'"> {{ item}} </div>
        <!-- 遍历的是一个数组  item依次等于每个成员 -->
        <div v-for="item of b1"> {{ item}} </div>
        <!-- 自我拓展 -->
        <div v-for="item of b2">
            {{ item.id}} - {{ item.title }}
            <!-- 判断是否有该数据（判断数据的状态的布尔值） -->
            <span v-if="item.haves">- {{item.haves}} </span>
        </div>

        <div v-for="(item , index) in b3 " :key="'itemkey'+index">
            <p>{{  index+1  }} - {{  item  }}</p>
        </div>
        <!-- 遍历的是一个对象 第一个参数是value 第二个参数是 key   -->
        <!-- 遍历的是对象跟以上三种 得到的值是不一样的 -->
        <div v-for="(value,key) of {a:1,b:2}">
            key: {{ key}} - value :{{ value }}
        </div>

        <!-- 执行的是 innerText -->
        <div v-text="c1"></div>
        <!-- 执行的是 innerHTML 容易引起 xss攻击 -->
        <div v-html="c1"></div>

        <!--  v-bind:属性="属性的值" -->
        <div v-bind:id="d1">我的动态属性id的值</div>
        <div :id="d1"></div>
        <div :jo-aso-Pos.camel="d3">自定义属性名修饰为驼峰式且为小写</div>
        <!-- class的绑定 写法1 数组 -->
        <div class="a" v-bind:class="['k','f',d2,b3]"> 写法1 </div>
        <!-- class的绑定  写法2 字符串 -->
        <div class="a" v-bind:class="'abc'">写法2 </div>
        <!-- class的绑定  写法3 对象 属性的值等于true的就会被采用 -->
        <div class="a" v-bind:class="{
                f:'',
                b:1,
                c:undefine,
                d:'abc',
                e:NaN
            }">写法3 </div>

        <!-- style的绑定 -->
        <div :style="{fontSize:'20px',color:red}"> style的绑定 </div>

        <!-- v-bind  使用的时候有修饰符  camel是忽略 ’-‘ 拼接成完整的属性名称 -->
        <div :abc-efg.camel="d1">v-bind的camel修饰符 </div>
        <div :abc-efg="d1">v-bind的camel修饰符 </div>

        <!-- v-on 事件的绑定 v-on:事件名称 简写为 @事件名称  -->
        <!-- 第一种写法  v-on:事件名="函数" 函数的第一个参数就是 event对象 -->
        <button @click="fn1">我是一个按钮 fn1</button>
        <!-- 第二种写法 v-on:事件名="函数()" 如果需要获取event对象需要手动的传入 $event对象 -->
        <button v-on:click="fn2($event,123)">我是一个按钮 fn2</button>
        <!-- 第三种写法 v-on:click="简单语句" -->
        <button v-on:click=" ct = ct +1"> ct is {{ ct}} </button>

        <!-- 关于事件绑定的修饰符 -->
        <!-- 单次绑定 once -->
        <button v-on:click.once=" ct = ct +1"> ct is {{ ct}} </button>
        <div class="out" v-on:click.capture="fnout">
            <div class="in" v-on:click.capture="fnin"></div>
        </div>

        <!-- 阻止了浏览器的默认行为 -->
        <a href="http://www.baidu.com" v-on:click.prevent="fn3">跳转到百度</a>

        <div>
            keypress
            <input v-on:keypress.enter="fn4" />
        </div>
        <button v-on:click.shift="fn4"> fn4 的按钮</button>

        <div>
            input 的demo
            <h1> uname: {{ uname}} </h1>


            用户名: <input :value="uname" @input="fn5" /> <br />
            <!-- v-model 其实是一种语法糖 -->
            <!-- 面试会常问 v-model的实现原理 -->
            <!-- v-model其实就上上面的127行的代码的 简写形式 -->
            用户名: <input v-model="uname" />
        </div>

        <div>
            select的例子
            sltValue: {{ sltValue  }}
            <select :value="sltValue" @change="fn6">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>

            <select v-model="sltValue">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <p>
                <p v-if="sexValue!=0">性别：{{ sexValue }}</p>
                <span>男<input type="radio" id="boy" value="男" v-model="sexValue"></span>
                <span>女<input type="radio" id="girl" value="女" v-model="sexValue"></span>
            </p>

            <!-- <button ">点击实现</button> -->
            <p>这题我选择（{{ mas }}）</p>
            <p v-for="item in arr9" @click="tachfunarr($event)" class="a">
                <span v-if="1" class="b">{{item}}</span>
                <span v-if="item==0" @click="tachfunarr($event)">取消</span>
                <!-- <span v-if="item==0" v-pre>取消</span> -->
            </p>
        </div>

        <button @click="omsas()">开始吧</button>

        <button @click="ganhuo">点击提取</button>
        <p v-for="(ite , index) in mujs" :key="'itekey'+index">
            <span>{{ite.id}}</span>
            <span>{{ite.kfc}}</span>
        </p>
        <!-- {{ 1+1 }} -->

        <script>
            // vue2  vue3 不是我们对于vue的区分
            // 实际应该按照语法的api的方式去区分 
            //  配置api  和  组合式api
            // 配置api入手


            //  MVVM  核心  数据驱动视图( 对比传统原生js 我们只需要关注数据的变化 )


            // 数字0 空字符串  false null undefine NaN 这些值布尔转换都是 false

            const app = new Vue({
                    el: '#app', // element的简写  vue的挂载节点 ( vue起作用的区域)
                    data: { // data 里面的数据会挂载在实例上面 状态，是指一种变化了之后会引起视图更新的数据
                        a: "这个是a",
                        b: 2,
                        c: 4,
                        ct: 1,
                        a1: 0,
                        a2: null,
                        a3: '123',
                        a4: '',
                        b1: [
                            1, 2, 3
                        ],
                        b2: [{
                                id: 1,
                                title: '西瓜'
                            },
                            {
                                id: 2,
                                title: '草莓'
                            },
                            {
                                id: 3,
                                title: '胡萝卜',
                                haves: '有且仅有'
                            },
                        ],
                        b3: ["a", "b", "c"],
                        c1: '<h1>123文本</h1>',
                        d1: 'abc',
                        d2: 'efg',
                        d3: 'laa',
                        red: 'blue',
                        uname: '123123',
                        sltValue: '',
                        arr9: ["a", "b", "c", ""],
                        mas: '',
                        sexValue: '',
                        gioVal: null,
                        mujs: [{
                            id: 2,
                            kfc: "提取2"
                        }, {
                            id: 3,
                            kfc: "提取3"
                        },{
                            id: 1,
                            kfc: "提取1"
                        }, ],
                        myguoh:null
                    },
                    methods: { // 自定义方法 methods的方法也会挂载在 vue实例上
                        fn1(evn) {
                            console.log('我是fn1,这是事件属性event', evn)
                        },
                        fn2(arg1, arg2) {
                            console.log('我是fn2', arg1)
                            console.log('arg2', arg2)
                        },
                        fn3() {
                            console.log('我是fn3')
                        },
                        fnout() {
                            console.log('我是外层的点击')
                        },
                        fnin() {
                            console.log('我是里层的点击')
                        },
                        fn4() {
                            console.log('我是fn4')
                        },
                        fn5(ev) {
                            this.uname = ev.target.value
                        },
                        fn6(ev) {
                            console.log('fn5', ev.target.value)
                            this.sltValue = ev.target.value
                        },
                        tachfunarr(event) {
                            if (event.target.innerText == "取消") {
                                this.mas = ''
                            } else {
                                this.mas = event.target.innerText
                            }
                            console.log(event.target.innerText)
                            // this.arr9.push("真的")
                            // console.log(this.arr9)
                            // this.arr9.pop() 
                            // console.log(this.arr9)
                            // console.log("好了")
                        },
                        omsas() {
                            while (this.gioVal = this.b3.shift()) {
                                console.log(this.gioVal)
                            }
                            this.arr9.push(1)
                            console.log(this.arr9)
                            this.arr9.pop()
                            console.log('取出了一', this.arr9)
                        },
                        ganhuo(){
                            this.mujs.sort((o1, o2)=>{ o1.id - o2.id })
                            console.log(this.mujs)
                            // console.log(this.mujs.slice(1))
                        }
                    }
                },

            )

            console.log('app', app)
            const asd= {
                id:2,
                is:"那就"
            }
            asd.id = 100
            // console.log( Object.prototype.toString.call(null))
            // console.log(typeof null )
        </script>

</body>

</html>